<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="utf-8">
		<title>小K服务</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="shortcut icon" href="../../../static/favicon.ico" th:href="@{/favicon.ico}">
		<link rel="stylesheet" type="text/css" href="../../../static/mui/css/mui.min.css" th:href="@{/mui/css/mui.min.css}" />
		<style type="text/css">
			.mui-input-group {
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>返回
			</button>
			<h1 class="mui-title">填写报修单</h1>
		</header>
		<div class="mui-content">

			<form class="mui-input-group">
				<div class="mui-input-row">
					<label for="">报修类型</label>
					<input type="text" class="mui-input-clear" th:value="${session.subClassify.repairClassify.title}+'-'+${session.subClassify.title}" value="" placeholder="报修类型" disabled="disabled">
				</div>
			</form>
			<p style="text-indent: 2em;" th:text="'报修类型说明：'+${session.subClassify.content}"></p>
			<!--<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						报修类型：水电-电气开关
					</div>
				</div>
			</div>-->
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label for="">报修人</label>
					<!--/*@thymesVar id="user" type="cn.goour.lsxyxf.entity.User"*/-->
					<input type="text" class="mui-input-clear" th:value="${session.user.name}" value="报修人" placeholder="报修人" disabled="disabled">
				</div>
				<div class="mui-input-row">
					<label for="">报修地点</label>
					<input type="text" placeholder="报修地点（宿舍号）" v-model.trim="repair.room">
				</div>
				<div class="mui-input-row">
					<label for="">联系电话</label>
					<input type="text" class="mui-input-clear" placeholder="联系电话" v-model.trim="repair.phone">
				</div>
			</form>
			<div class="mui-input-row" style="margin: 10px 0px;">
				<textarea id="textarea" rows="5" v-model.trim="repair.content" th:placeholder="'详细报修内容：'+${session.subClassify.repairClassify.contentLen}+'字'" th:maxlength="${session.subClassify.repairClassify.contentLen}"></textarea>
			</div>
			<div class="mui-content-padded">
				<p>
					请理性报修，若工作人员发现存在恶意报修行为，将有权对您的账户进行禁止登陆处理。
				</p>
				<p>
					构建良好校园网络环境，每个人都应认真对待。
				</p>
				<p>
					人若诚心待我，我便诚心待人。您的配合，是我们最大的执行动力。
				</p>
				<button type="button" v-on:click="addRepair($event)" class="mui-btn mui-btn-primary mui-btn-block">提交报修单</button>
			</div>

		</div>
		<script src="../../../static/mui/js/mui.min.js" th:src="@{/mui/js/mui.min.js}"></script>
		<script src="../../../static/plugins/vuejs/vue.min.js" th:src="@{/plugins/vuejs/vue.min.js}" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" th:inline="javascript">
            /*<![CDATA[*/
            var app = new Vue({
                el: '.mui-content',
                data: {
                    repair:{
                        room:/*[[${session.user.room}]]*/"",
                        phone:/*[[${session.user.phone}]]*/"",
                        content:""
					}
                },
                methods:{
                    addRepair:function(evn){
                        mui(evn.target).button('loading');

						if(this.repair.room.length === 0){
							mui.toast("报修地点不能为空");
							mui(evn.target).button('reset');
							return false;
						}
						if(this.repair.phone.length === 0){
							mui.toast("联系电话不能为空");
							mui(evn.target).button('reset');
							return false;
						}
                        if(this.repair.content.length === 0){
                            mui.toast("报修内容不能为空");
                            mui(evn.target).button('reset');
                            return false;
                        }
                        mui.ajax({
                            type:"post",
                            data:app.repair,
                            url:"../../Add",
                            async:true,
                            dataType:"json",
                            success:function(data){
                                if(data.code === 0){
                                    mui.toast(data.msg);
                                    mui.openWindow({
                                        url: "../../../index",
                                        show: {
                                            autoShow: true
                                        }
                                    });
                                }else {
                                    mui.toast(data.msg);
                                }
                                mui(evn.target).button('reset');
                            },
                            error:function(){
                                mui.toast("加载错误");
                                mui(evn.target).button('reset');
                            }
                        });
//						window.location.href="index.html";
                    }
                },
                mounted:function () {
                    mui.init();
                }
            });

            /*]]>*/
		</script>
	</body>

</html>